<script setup>
defineOptions({
    name:'HomeView'
})
import { ref, computed, watch, provide } from 'vue';
import child from '@/components/child.vue'
import { useCounterStore } from '@/stores/counter'
const sum = ref(0)
const add = () => {
    sum.value ++
}
const arr = ref([1,2,3,4,5,6,7,8])
const computedSum = computed (() => {
    return arr.value.filter(item => item > 2)
})

// 监听单个普通数据
const watchOneData = ref(0)
const watchOneData2 = ref(0)
const watchChange = () => {
    watchOneData.value++
    watchOneData2.value++
}
watch(watchOneData, (newValue, oldValue)=>{
    console.log(newValue,oldValue);
},{
    immediate:true,
})
// 监听多个数据
watch([watchOneData,watchOneData], (newValue, oldValue)=>{
    console.log(newValue,oldValue,'多个');
})
// 指定监听
const watchObj = ref({name:'hrw',age:18})
watch(() => watchObj.value.name, (newValue, oldValue) => {
    console.log(newValue, oldValue);
})
const watchObjChange = () => {
    watchObj.value.name = 'zmz'
}

const message = ref(100)
const spendTofater = (n) =>{
    message.value = message.value - n
}
const sonRef = ref(null)
const leseon = () => {
    sonRef.value.talk()
    console.log(sonRef.value.son);
}

const provideData = ref('abc')
provide('provideData',provideData)

// store
const counterStore = useCounterStore() 
</script>

<template>
    <div>
        <h1>{{ sum }}</h1>
        <h1>{{ computedSum }}</h1>
        <button @click="add">加➕</button>

        <h2>{{ watchOneData }}</h2>
        <button @click="watchChange">加➕</button>
        <h2>{{ watchObj }}</h2>
        <button @click="watchObjChange">改变名字</button>
        <button @click="leseon">听儿子说什么？</button>
        <child ref="sonRef" :message="message" @spendTofater="spendTofater"/>
        <hr/>
        <h1>store</h1>
        <div>{{ counterStore.count }}--{{ counterStore.doubleCount }}</div>
        <div @click="counterStore.increment()">调用 store中的方法</div>
    </div>
</template>